<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #container {
        width: 960px;
        margin: 0 auto;
    }

    #header {
        position: relative;
    }

    #header2 {
        display: inline-block;
        border: 1px, solid, white;
        padding: 7px;
        margin-top: 20px;
        background: lightgreen;
        float: right;
        position: relative;
        top: -50px;
    }

    #list1 {
        position: relative;
        margin: 0px;
        padding: 0px;
        border: 0px;
        font-size: 100%;
        vertical-align: baseline;
    }

    li {
        list-style-type: none;
        color: white;
        text-align: center;
        float: left;
        /*列表水平展开*/
        padding: 4px;
        float: left;
        text-align: center;
    }

    #zhe {
        position: absolute;
        left: 2px;
        top: -5px;

    }

    #space {
        margin-top: 60px;
        margin-left: 0px;
        background: orange;
        width: 960px;
        height: 36px;
    }

    #list2 {
        margin: 0px;
        padding: 2px;
        border: 0px;
        font-size: 100%;
    }

    #li2 {
        width: 4.9%;
    }

    #space2 {
        height: 15px;
    }

    #space4 {
        height: 25px;
    }

    #space5 {
        position: relative;
        height: 400px;
        border: 1px green solid;
    }

    #biaoqian {
        position: absolute;
        left: -20px;
        top: 20px;
    }





    #book1 {
        position: absolute;
        top: 100px;
        left: 0px;
        z-index: 1;
    }

    #bookNO1 {
        position: absolute;
        top: 90px;
        left: 25px;
        z-index: 2;
    }

    /* ----------------------------------------------------------------------- */


    #space5 {
        width: 960px;
        height: 400px;
    }

    #a {
        float: left;
        height: 400px;
        width: 480px;
    }

    #a1 {
        float: left;
        height: 400px;
        width: 300px;
    }

    #a2 {
        float: right;
        height: 400px;
        width: 180px;
    }

    #b {
        width: 480px;
        height: 400px;
        float: right;
    }

    #b1 {
        float: right;
        height: 200px;
        width: 479px;
    }

    #b2 {
        float: right;
        height: 200px;
        width: 479px;
    }

    p {
        font-size:0.9em;
    }
    #bookNo2,#bookNo3{
        position: relative;
        top: -63px;
        left: -95px;
    }
</style>

<body>
    <div id="container">
        <div id="header">
            <div id="header1">
                <img src="img/logo.jpg">
            </div>
            <div id="header2">
                <ul id="list1">
                    <li>尾品汇
                        <img src="img/icon_count.png" id="zhe">
                    </li>
                    <li>当当优品</li>
                    <li>数字馆</li>
                    <li>都看阅器</li>
                </ul>
            </div>
        </div>
        <div id="space">
            <ul id="list2">
                <li id="li2">首页</li>
                <li id="li2">图书</li>
                <li id="li2">音像</li>
                <li id="li2">童装</li>
                <li id="li2">服装</li>
                <li id="li2">鞋服</li>
                <li id="li2">运动</li>
                <li id="li2">箱包</li>
                <li id="li2">美妆</li>
                <li id="li2">珠宝</li>
                <li id="li2">家居</li>
                <li id="li2">食品</li>
                <li id="li2">酒</li>
                <li id="li2">手机</li>
                <li id="li2">数码</li>
                <li id="li2">电脑</li>
                <li id="li2">家电</li>
            </ul>
        </div>
        <div id="space2"></div>
        <div id="space3">
            <img src="img/banner.png">
        </div>
        <div id="space4">
        </div>
        <div id="space5">
            <div id="a">
                <img src="img/bg_bang.gif" id="biaoqian">
                <div id="a1">
                    <img src="img/bookNo1.gif" id="bookNO1">
                    <img src="img/book-01.jpg" id="book1">
                </div>

                <div id="a2">
                    <a href="http://www.baidu.com">偷影子的人</a>
                    <p>作 者：[法] 马克·李维（Marc Levy）著</p>
                    <p>出版社：湖南文艺出版社</p>
                    <p>当当价：￥17.90</p>
                    <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，
                        我童年时的小女孩，今日城变成了女人，一段青梅竹
                        马的回忆，一个时间之神没有应允的原望。一个老
                        是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊
                        能力而强大：他能”偷别人的影子”</p>
                </div>
            </div>

            <div id="b">
                <div id="b1">
                    <img src="img/book-02.jpg">
                    <img src="img/bookNo2.gif" id="bookNo2">
                    <a href="http://www.baidu.com">
                        <p>看见(央视知名记者、主持人)柴静：十年个人成长告白，中国社会变迁的备忘录</p>
                    </a>
                    <p>作者：柴静 著
                        出版社：广西师范大学出版社
                        ￥29.40 7.4折</p>
                </div>
                <div id="b2">
                    <img src="img/book-03.jpg">
                    <img src="img/bookNo3.gif" id="bookNo3">
                    <a href="http://www.baidu.com">
                        改变孩子先改变自己
                    </a>
                    <p>作者：贾容韬要毅著
                        出版社：作家出版社
                        ￥22.20 7.4折</p>
                </div>
            </div>


        </div>

















        <!-- <div id="space5">
            <img src="img/bg_bang.gif" id="biaoqian">
            <div id="left_space">
                <div id="left_space_1">
                    <img src="img/bookNo1.gif" id="bookNO1">
                    <img src="img/book-01.jpg" id="book1">
                </div>
                <div id="left_space_2">
                    <a href="http://www.baidu.com">偷影子的人</a>
                    <p>作 者：[法] 马克·李维（Marc Levy）著</p>
                    <p>出版社：湖南文艺出版社</p>
                    <p>当当价：￥17.90</p>
                    <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，
                        我童年时的小女孩，今日城变成了女人，一段青梅竹
                        马的回忆，一个时间之神没有应允的原望。一个老
                        是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊
                        能力而强大：他能”偷别人的影子”</p>
                </div>
            </div>
            <div id="right_space">
                <div id="right_space_1">
                    666!!!
                </div>
                <div id="right_space_2">
                </div>
            </div>
        </div> -->
    </div>
</body>

</html>